<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="title1">标题1</h1>
    <h2 id="title2">标题2</h2>
    <h3 onclick="title3()">标题3</h3>
    <button onclick="btn()" style="width: 30px; height: 20px;"><div class="box"></div></button>
    <div class="box2" style="width: 100px; height: 100px; background-color: aqua;"></div>
    <form action="#">
        <p>输入内容：</p>
        <input type="text" class="input"/>
    </form>
    <script>
        const title1 = document.querySelector(".title1")
        title1.onclick = function () {
            console.log("这是标题1")
        }

        title2.onclick = function () {
            console.log("这是标题2")
        }

        function title3() {
            console.log("这是标题3")
        }
        
        a = 0;
        const box = document.querySelector(".box")
        function btn() {
            a++;
            box.innerHTML = a;
        }

        const box2 = document.querySelector(".box2")
        box2.onmouseover = function () {
            box2.style.backgroundColor = 'red';
        }
        box2.onmouseout = function () {
            box2.style.backgroundColor = 'aqua'
        }

        let i = 100
        box2.ondblclick = function () {
            i += 50
            box2.style.height = `${i}px`
        }

        const input = document.querySelector(".input")
        //键盘事件
        input.onkeydown = function () {
            console.log('按下按键')
        }
        input.onkeyup = function () {
            console.log('释放按键')
        }
        input.onkeypress = function () {
            console.log('产生字符')
        }

        //表单事件
        input.onfocus = function () {
            console.log('获得焦点')
        }
        input.onblur = function () {
            console.log('失去焦点')
        }
        input.oninput = function () {
            console.log('表单输入')
        }
        input.onchange = function () {
            console.log('表单改变')
        }
    </script>
</body>
</html>